<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大屏数据可视化平台</title>
    <link rel="stylesheet" href="./assets/css/m.css" />
  </head>
  <body>
    <!-- loading  -->
    <div class="loading" style="visibility: visible">
      <img width="120" src="./assets/imgs/loading.gif" />
      <img width="100" src="./assets/imgs/loading-text.png" />
    </div>
    <!-- loading  -->

    <!-- main -->
    <main style="visibility: hidden">
      <!-- banner -->
      <div class="banner">
        <h1>大屏数据可视化平台</h1>
        <span>FENG&nbsp;TUAN&nbsp;BIG&nbsp;DATA</span>
      </div>
      <!-- banner -->

      <!-- title -->
      <div class="title">
        <div
          class="index"
          style="background-image: url(./assets/imgs/m-one.png)"
        ></div>
        <div class="desc">
          <p>平台交易数据</p>
          <p>Platform transaction data</p>
        </div>
      </div>
      <!-- title -->
      <!-- buy-data -->
      <div class="buy-data">
        <!-- 数字 -->
        <div class="num">
          <!-- 累计成交额 -->
          <div class="ljcje">
            <p>累计成交额</p>
            <p>232,235</p>
          </div>
          <!-- 累计成交额 -->
          <!-- 待收总额 -->
          <div class="dsze">
            <p>待收总额</p>
            <p>232,45</p>
          </div>
          <!-- 待收总额 -->
        </div>
        <!-- 数字 -->

        <!-- 📈图表echarts -->
        <div class="echarts1"></div>
        <!-- 📈图表echarts -->

        <!-- 数字 -->
        <div class="num" style="justify-content: center; margin-top: 0.1rem">
          <!-- 累计成交额 -->
          <div class="ljcje">
            <p>累计参加人数</p>
            <p>232,235</p>
          </div>
          <!-- 累计成交额 -->
        </div>
        <!-- 数字 -->

        <!-- 📊图表echarts -->
        <div class="echarts2"></div>
        <!-- 📊图表echarts -->
      </div>
      <!-- buy-data -->

      <!-- title -->
      <div class="title">
        <div
          class="index"
          style="background-image: url(./assets/imgs/m-two.png)"
        ></div>
        <div class="desc">
          <p>会员购物占比</p>
          <p>Member buy data</p>
        </div>
      </div>
      <!-- title -->
      <!-- member-buy -->
      <div class="member-buy">
        <div class="echarts3"></div>
        <div class="data">
          <p class="title">老会员购买</p>
          <p class="num">22,339</p>
          <p class="title">非会员购买</p>
          <p class="num">2,134</p>
        </div>
      </div>
      <!-- member-buy -->

      <!-- title -->
      <div class="title">
        <div
          class="index"
          style="background-image: url(./assets/imgs/m-three.png)"
        ></div>
        <div class="desc">
          <p>最受欢迎产品TOP5</p>
          <p>🐂NB products data</p>
        </div>
      </div>
      <!-- title -->

      <!-- nb products -->
      <div class="nb-products">
        <div class="echarts4"></div>
      </div>
      <!-- nb products -->
    </main>
    <!-- main -->
    <script src="./assets/js/common-jq.js"></script>
    <script src="./assets/js/common-echarts.js"></script>
    <script src="./assets/js/m-flexible.js"></script>
    <script src="./assets/js/m1.js"></script>
    <script src="./assets/js/m2.js"></script>
    <script src="./assets/js/m3.js"></script>
    <script src="./assets/js/m4.js"></script>
    <script>
      window.onload = function () {
        $(".loading").css("visibility", "hidden");
        $("main").css("visibility", "visible");
      };
    </script>
  </body>
</html>
